<template>
    <div class="wrapper">
        <div class="search">
            <el-input placeholder="空间名称 /用户名称 / 文章名称" v-model="input3" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="globalSearch('open')">搜索</el-button>
            </el-input>
        </div>
        <div class="searchScroll" v-if="globalSearchP">
            <ul class="infinite-list" v-infinite-scroll="globalSearch" :infinite-scroll-immediate="false"
                :infinite-scroll-delay='15'>
                <li>
                    <el-row>
                        <el-col :span="6" :offset="18"><label>
                                <el-button type="text" @click="goGlobal('close')">关闭</el-button>
                            </label></el-col>
                    </el-row>
                </li>
                <li v-for="(item,index) in globalSearchData" class="infinite-list-item" :key="index"
                    @click="goGlobal(item)">
                    <el-row>
                        <el-col :span="18">{{item.title}}</el-col>
                        <el-col :span="6"><label>{{item.type | roleTypeToName}}</label></el-col>
                    </el-row>
                </li>
            </ul>
        </div>
        <swiper :options="swiperOption" v-if="imgList.length>0" ref="mySwiper">
            <swiper-slide v-for="(item, index) in imgList" :key="index">
                <img :src="item.imgUrl" style="width:100%" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
        <div class="nav">
            <el-row>
                <el-col :span="3">
                    <div @click="link(userInfo)">
                        <i class="el-icon-star-on"></i>
                        <label class="navMenu">{{userInfo.roleName || userInfo.rolename}}空间</label>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div @click="$router.push({path:'/space',query:{type:0,active:8}})">
                        <i class="el-icon-star-on"></i>
                        <label class="navMenu" @click="$router.push({path:'/space',query:{type:0,active:8}})">教师</label>
                        <!--                            <p>{{PersonalSpace.tecNum?PersonalSpace.tecNum:0}}个</p>-->
                    </div>
                </el-col>
                <el-col :span="3">
                    <div @click="$router.push({path:'/space',query:{type:0,active:6}})">
                        <i class="el-icon-star-on"></i>
                        <label class="navMenu" @click="$router.push({path:'/space',query:{type:0,active:6}})">学生</label>
                        <!--                            <p>{{PersonalSpace.stuNum?PersonalSpace.stuNum:0}}个</p>-->
                    </div>
                </el-col>
                <el-col :span="3">
                    <div @click="$router.push({path:'/space',query:{type:0,active:9}})">
                        <i class="el-icon-star-on"></i>
                        <label class="navMenu" @click="$router.push({path:'/space',query:{type:0,active:9}})">家长</label>
                        <!--                            <p>{{PersonalSpace.patNum?PersonalSpace.patNum:0}}个</p>-->
                    </div>
                </el-col>
                <!-- <el-col :span="3">
                    <div>
                        <i class="el-icon-star-on"></i>
                        <label class="navMenu" @click="$router.push({path:'/school'})">机构名称</label>
                    </div>
        </el-col>-->
                <el-col :span="3">
                    <div @click="$router.push({path:'/space',query:{type:1,active:1000}})">
                        <i class="el-icon-star-on"></i>
                        <label class="navMenu"
                            @click="$router.push({path:'/space',query:{type:1,active:1000}})">班级</label>
                        <!--                            <p>{{SpaceAgency.classNum?SpaceAgency.classNum:0}}个</p>-->
                    </div>
                </el-col>
                <el-col :span="3">
                    <div @click="$router.push({path:'/space',query:{type:1,active:7}})">
                        <i class="el-icon-star-on"></i>
                        <label class="navMenu" @click="$router.push({path:'/space',query:{type:1,active:7}})">学校</label>
                        <!--                            <p>{{SpaceAgency.schoolNum?SpaceAgency.schoolNum:0}}个</p>-->
                    </div>
                </el-col>
                <el-col :span="3">
                    <div @click="$router.push({path:'/space',query:{type:1,active:100011}})">
                        <i class="el-icon-star-on"></i>
                        <label class="navMenu"
                            @click="$router.push({path:'/space',query:{type:1,active:100011}})">教研</label>
                        <!--                            <p>{{SpaceAgency.orgNum?SpaceAgency.orgNum:0}}个</p>-->
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    export default {
        computed: {
            ...mapState({
                userInfo: state => state.userModule.userInfo
            })
        },
        created() {},
        data() {
            return {
                globalSearchP: false,
                globalSerachPage: 0,
                globalSearchData: [],
                input3: "",
                swiperOption: {
                    loop: true,
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false
                    },
                    slidesPerView: 3,
                    centeredSlides: true,
                    effect: "fade",
                    paginationClickable: true,
                    pagination: {
                        el: ".swiper-pagination"
                    },
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    },
                    on: {
                        tap: function (e) {}
                    }
                },
                imgList: [{
                        id: "001",
                        imgUrl: require("../../assets/img/banner.jpg")
                    },
                    {
                        id: "002",
                        imgUrl: require("../../assets/img/banner2.jpg")
                    },
                    {
                        id: "003",
                        imgUrl: require("../../assets/img/banner3.jpg")
                    },
                    {
                        id: "004",
                        imgUrl: require("../../assets/img/banner4.jpg")
                    }
                ],
                PersonalSpace: {},
                SpaceAgency: {}
            };
        },

        methods: {
            goGlobal(params) {
                if (params == 'close') {
                    this.input3 = ''
                    this.globalSearchP = false
                } else {
                    this.input3 = ''
                    this.globalSearchP = false
                    this.$store.commit('commonModule/INIT_STUDENTTOSPACE', false);
                    if (this.userInfo.id && params.userid) {
                        this.$store.dispatch('visitorAllModule/visitorAdd', {
                            fromuserid: params.userid,
                            visitorid: params.userid,
                            type: 4
                        })
                    }
                    this.goSpaceOthers(params, params.type == 1 ? true : false)
                }
            },
            globalSearch(params) {
                if (params == 'open') {
                    this.globalSearchData = []
                    this.globalSerachPage = 0
                }
                if (this.input3 == '') {
                    this.$message.warning("请先输入搜索内容！")
                } else {
                    this.globalSerachPage += 1
                    this.globalSearchP = true
                    this.$store.dispatch('homeModule/homeSearch', {
                        limit: 30,
                        page: this.globalSerachPage,
                        search: this.input3
                    }).then(res => {
                        if (res && res.list.length > 0) {
                            this.globalSearchData.push(...res.list)
                            this.globalSearchP = true
                        } else if (this.globalSearchData.length < 1) {
                            this.globalSearchP = false
                        }
                    })
                }
            },
            // 去他人空间 或者去对应机构空间

            goSpaceOthers(others, article) {
                this.$store.dispatch('commonModule/checkVisitor', {
                    userId: others.userid
                }).then(res => {
                    if (res.data.code == 200 || this.userInfo.id == others.userid) {
                        if (this.userInfo.id == others.userid) {
                            this.$store.commit('commonModule/INIT_ISMANAGER', true);
                        } else {
                            if (this.userInfo.id && others.userid) {
                                this.$store.dispatch('visitorAllModule/visitorAdd', {
                                    fromuserid: others.userid,
                                    visitorid: others.userid,
                                    type: 4
                                })
                            }
                            this.$store.commit('commonModule/INIT_ISMANAGER', false);
                        }
                        if (others.roleid == null) {
                            others.roleid = others.roleId || others.role_id
                        }
                        if (others) {
                            // 学校9527 班级1000 教研100011
                            if (this.userInfo.id == others.userid) {
                                this.$store.commit('commonModule/INIT_ISMANAGER', true);
                            } else {
                                this.$store.commit('commonModule/INIT_ISMANAGER', false);
                            }
                            if (others.roleid == 7) {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/school/schoolHomePage",
                                    query: {
                                        others: others
                                    }
                                });
                            } else if (others.roleid == 1000) {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/class/classHomePage",
                                    query: {
                                        others: others
                                    }
                                });
                            } else if (others.roleid == 100011) {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/research/researchOther/researchOtherHome",
                                    query: {
                                        others: others
                                    }
                                });
                            } else {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: (others.userid == this.userInfo.id) ? article ?
                                        "/students/articleMain" : "/students/studentsHomePage" :
                                        article ? "/otherZone/articleMain" :
                                        "/otherZone/otherZoneHomePage",
                                    query: {
                                        others: others
                                    }
                                });
                            }
                        }
                    } else {
                        this.$message.warning('没有访问权限!')
                    }
                })
            },
            // 对应角色跳转到对应空间
            link(user) {
                // console.log(user)
                // 8教师，6学生，9家长，9527学校，1000班级，100011教研
                switch (user.role_id || user.roleid) {
                    case 6:
                    case 8:
                    case 9:
                        this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', user)
                        this.$router.push({
                            path: "/students",
                            query: user.id
                        });
                        break
                    case 7:
                        this.$store.commit('commonModule/INIT_ISMANAGER', true);
                        this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', user)
                        this.$router.push({
                            path: "/school/schoolHomePage",
                            query: {
                                others: user
                            }
                        });
                        break
                    case 1000:
                        this.$store.commit('commonModule/INIT_ISMANAGER', true);
                        this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', user)
                        this.$router.push({
                            path: "/class/classHomePage",
                            query: {
                                others: user
                            }
                        });
                        break
                    case 100011:
                        this.$store.commit('commonModule/INIT_ISMANAGER', true);
                        this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', user)
                        this.$router.push({
                            path: "/research/researchOther/researchOtherHome",
                            query: {
                                others: user
                            }
                        });
                        break
                    default:
                        this.$message.warning('请登录后重试')
                        break;
                }
            },
            handle(id) {
                // console.log(id, "点击了");
                //这里写点击的逻辑
            }
        }
    };
</script>

<style scoped lang="scss">
    .el-col-3 {
        width: 14.2%;
    }

    .swiper-container {
        width: 100%;
        overflow: hidden;
    }

    .swiper-pagination {
        width: 100%;
        height: 30px;
    }

    .wrapper {
        overflow: hidden;
        width: 100%;
        // height: 500px;
        background: #ccc;
        position: relative;

        .searchScroll {
            max-height: 360px;
            overflow: auto;
            position: absolute;
            z-index: 1000;
            top: 20%;
            right: 10%;
            opacity: 0.8;
            width: 400px;
            background-color: azure;

            ul>li {
                label {
                    margin-right: 20px;
                }

                list-style: none;
                padding-left: 10px;
                text-align: left;
                cursor: pointer;
            }
        }

        .search {
            position: absolute;
            z-index: 999;
            top: 10%;
            right: 10%;
            width: 400px;
        }

        .nav {
            position: absolute;
            bottom: 40px;
            width: 81%;
            left: 50%;
            transform: translateX(-50%);
            height: 120px;
            z-index: 10;
            background: rgba(233, 233, 235, 0.8);
            box-sizing: border-box;
            padding: 20px;
            border-radius: 4px;

            p {
                color: #666;
                margin: 0;
                line-height: 25px;
            }

            label {
                cursor: pointer;
            }

            i {
                cursor: pointer;
                display: block;
                font-size: 42px;
                color: lightgreen;
                text-align: center;
                margin: 10px auto;
            }
        }
    }

    .swiper-item {
        width: 100%;
    }
</style>